<template>
	<v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'

import api from '@/api/statistics'

const option = ref(null)

onMounted(() => {
	getRiskAndConflict()
})

const getRiskAndConflict = async () => {
	const result = await api.getRiskAndConflict()
	if (result.code === 200) {
		const category = result.data.map(item => item.code)
		const bar = result.data.map(item => item.flyVolume)
		const line = result.data.map(item => item.risk)
		option.value = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			legend: {
				data: ['飞行量', '风险评估值'],
				textStyle: {
					color: '#fff'
				}
			},
			xAxis: [
				{
					type: 'category',
					data: category,
					axisPointer: {
						type: 'shadow'
					},
					// axisLine: {
					// 	lineStyle: {
					// 		color: '#fff'
					// 	}
					// },
					axisTick: {
						lineStyle: {
							color: '#fff'
						}
					}, 
					axisLabel: {
						color: '#fff'
					},
					splitLine: {
						lineStyle: {
							color: '#fff'
						}
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '飞行量',
					min: 0,
					// axisLine: {
					// 	lineStyle: {
					// 		color: '#fff'
					// 	}
					// },
					axisTick: {
						lineStyle: {
							color: '#fff'
						}
					}, axisLabel: {
						color: '#fff'
					},
					splitLine: {
						lineStyle: {
							color: '#fff'
						}
					}
				},
				{
					type: 'value',
					name: '风险评估值',
					min: 0,
					max: 1,
					// axisLine: {
					// 	lineStyle: {
					// 		color: '#fff'
					// 	}
					// },
					axisTick: {
						lineStyle: {
							color: '#fff'
						}
					}, axisLabel: {
						color: '#fff'
					},
					splitLine: {
						lineStyle: {
							color: '#fff'
						}
					}
				}
			],
			series: [
				{
					name: '飞行量',
					type: 'bar',
					data: bar
				},
				{
					name: '风险评估值',
					type: 'line',
					yAxisIndex: 1,
					data: line
				}
			]
		}
		use([
			CanvasRenderer,
			TitleComponent,
			TooltipComponent,
			LegendComponent,
		])
	} else {
		ElMessage.error(result.msg)
	}
}
</script>

<style scoped>
.chart {
	height: 100%;
}
</style>